<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../static/echarts.min.js"></script>
    <style>
      #table {
        position: absolute;
        bottom: 0;
      }

      #table table {
        border: 1px solid black;
      }

      #table table th,
      #table table td {
        border: 1px solid black;
        /* 为单元格添加边框 */
      }
    </style>
  </head>

  <body>
    <div id="main" style="width: 100%; height: 500px">
      <div id="table"></div>
    </div>

    <script>
      window.onload = function () {
        var chart = echarts.init(document.getElementById("main"));
        var option = {
          tooltip: {},
          xAxis: {
            type: "category",
            data: ["组1", "组2", "组3"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "应届毕业生",
              type: "bar",
              data: [741, 987],
              itemStyle: {
                color: "#4F81BD",
              },
            },
            {
              name: "不限",
              type: "bar",
              data: [373, 424],
              itemStyle: {
                color: "#F79646",
              },
            },
          ],
          grid: {
            bottom: 100, // 预留空间
          },
        };
        // 渲染图表
        chart.setOption(option);

        // 添加表格内容
        var tableData = `
    <table style="width:100%; border-collapse: collapse; text-align: center;">
        <thead>
            <tr>
                <th></th>
                <th>招录岗位</th>
                <th>招录人数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="color:#4F81BD;">应届毕业生</td>
                <td>741</td>
                <td>987</td>
            </tr>
            <tr>
                <td style="color:#F79646;">不限</td>
                <td>373</td>
                <td>424</td>
            </tr>
        </tbody>
    </table>
`;
        var table = document.createElement("div");
        table.id = "table";
        document.getElementById("main").appendChild(table);
        document.getElementById("table").innerHTML = tableData;
      };
    </script>
  </body>
</html>
